import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';
import { connect } from 'react-redux';
import View1 from '../../components/ViewRouter/View1/View1';
import View2 from '../../components/ViewRouter/View2/View2';
import View3 from '../../components/ViewRouter/View3/View3';
class ViewRouter extends Component {

    changeRouter = (path) => {
        this.props.history.push(path)
    }
    render() {
        return (
            <div id="ViewRouter">
                <p>ViewRouter</p>
                <ul>
                    <li> <Link to='/ViewRouter/View1'>View1</Link></li>
                    <li> <Link to='/ViewRouter/View2'>View2</Link></li>
                    <li> <Link to='/ViewRouter/View3'>View3</Link></li>
                    <li onClick={() => { this.changeRouter('/ViewRouter/View1') }}>View1</li>
                    <li onClick={() => { this.changeRouter('/ViewRouter/View2') }}>View2</li>
                    <li onClick={() => { this.changeRouter('/ViewRouter/View3') }}>View3</li>
                </ul>
                <div>
                    <Switch>
                        <Route path='/ViewRouter/View1' exact={true} component={View1} />
                        <Route path='/ViewRouter/View2' exact={true} component={View2} />
                        <Route path='/ViewRouter/View3' exact={true} component={View3} />
                    </Switch>
                </div>
            </div>
        );
    }
}

export default connect(
    (state, ownProps) => ({
    }),
    (dispatch, ownProps) => ({
    })
)(ViewRouter);
